<template>
  <div class="apply_page">
    <navigate>查看实名申请</navigate>
    <div class="apply_cont">
      <div class="administrator_head whitr_box">
        <img src="" alt="" />
        <div class="">
          <div class="user_name">张老师</div>
          <div class="user_level">二级管理员</div>
        </div>
      </div>
      <div class="administrator_info whitr_box">
        <div class="item_info">
          <div class="info_left">管理员性别：</div>
          <div class="info_right">女</div>
        </div>
        <div class="item_info">
          <div class="info_left">管理部门/班级：</div>
          <div class="info_right">女</div>
        </div>
      </div>

      <div class="reason_box">
        <div class="reason_head">
          <img src="@/assets/images/common/bar.png" alt="" />
          <div>申请实名的原因</div>
        </div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
      </div>

      <div class="footer_btn">
        <div class="blue_btn">同意申请</div>
        <div class="whirt_btn">忽略并返回上页</div>
      </div>
      <!-- <div class="footer_btn">
        <div class="blue_btn">已申请同意</div>
      </div> -->
    </div>

    <van-popup v-model="visibleArea" round position="center">
      <div class="agree_pop">
        <img src="@/assets/images/common/success_icon.png" alt="" />
        <div>您已同意管理员查看实名申请！</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visibleArea: true,
    };
  },
};
</script>

<style scoped lang='less'>
.apply_page {
  background-color: #f4f6fa;
  color: #333333;
}

.apply_cont {
  margin: 10px 10px 0 10px;
}
.whitr_box {
  background: #ffffff;
  border-radius: 6.67px;
}
.administrator_head {
  display: flex;
  align-items: center;
  padding: 10px 0 10px 10px;
}
.administrator_head img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 13.33px;

  background: red;
}
.user_name {
  font-weight: bold;
  font-size: 16.67px;
  line-height: 16.67px;
}
.user_level {
  color: #777777;
  font-size: 14px;
  line-height: 14px;
  margin-top: 14.67px;
}

.administrator_info {
  margin-top: 10px;
  font-size: 14px;
  line-height: 14px;
}
.administrator_info .item_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 43.33px;
  padding: 0 10.33px;
  line-height: 43.33px;
  border-bottom: 0.33px solid #dddddd;
}
.administrator_info .item_info:last-child {
  border: 0;
}
.administrator_info .item_info .info_left {
  color: #555555;
}

.reason_box {
}
.reason_head {
  display: flex;
  align-items: center;
  margin: 19px 0;
}
.reason_head img {
  width: 5.33px;
  height: 15.33px;
  margin-right: 11.33px;
}
.reason_head div {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}
.reason_box textarea {
  width: 100%;
  height: 180px;
  background: #ffffff;
  border-radius: 6.67px;
  border: 0;
  font-size: 14px;
  color: #666666;
  line-height: 29.33px;
  padding: 11px;
  box-sizing: border-box;
}
.footer_btn {
  margin-top: 20px;
}
.footer_btn div {
  width: 333.33px;
  height: 46.67px;
  line-height: 46.67px;
  text-align: center;
  font-size: 15.33px;
  border-radius: 6.67px;
  margin: 0 auto;
}
.footer_btn .blue_btn {
  color: #ffffff;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
}
.footer_btn .whirt_btn {
  background: rgba(0, 174, 255, 0);
  border: 0.67px solid #999999;
  margin-top: 16.67px;
}

::v-deep .van-popup {
  background: #000000;
  opacity: 0.8;
  border-radius: 26.67px;
}
.agree_pop {
  width: 296.67px;
  height: 53.33px;

  display: flex;
  align-items: center;
  justify-content: center;
}
.agree_pop img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.agree_pop div {
  font-size: 16.67px;
  color: #fff;
}
</style>